<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
    <th:block th:include ="commHeaderInclude::commHead">
    </th:block>
<!--style start-->
<link th:href="@{/base/uploader/style/form.css}" rel="stylesheet" type="text/css" />
<!--style end-->
<style>
html, body {
 background-color: transparent;
}
</style>
</head>

<body>
<div class="uploader" id="uploader">
    <form method="post" enctype="multipart/form-data" id="uploadForm" target="uploadBridge" class="uploadForm" action="uploader/upload">
        <input type="submit" class="submitButton" value="上传" />
        <input type="button" class="btn btn-outline-primary btn-sm" value="选择文件" />
        <input type="file" name="file" id="file" class="fileInput" multiple th:attr="accept1='${accept}'"/>
        <input type="hidden" name="type" th:value="${ext}" />
        <input type="hidden" name="ext" th:value="${ext}" />
        <input type="hidden" name="fileSizeTotalMbLimit" id="fileSizeTotalMbLimit"  th:value="${fileSizeTotalMbLimit}" />
        <input type="hidden" name="fileSizeMbLimit" id="fileSizeMbLimit"  th:value="${fileSizeMbLimit}" />
        <input type="hidden" name="fileTotalLimit" id="fileTotalLimit"  th:value="${fileTotalLimit}" />
        
        <textarea class="source" name="source" style="display:none;" th:text="${fileList}">
        </textarea>
        <!-- 
        <textarea class="source" name="sourceBack" style="display:none;">
        [
        	{
        		'event':'success',
        		'tips':'上传完成',
            	'fileName':'aa1.doc',
                'fileSize':15000,
                'serverFileName':'14654654879.doc'
            },{
            	'event':'success',
        		'tips':'上传完成',
            	'fileName':'aa2.doc',
                'fileSize':15000,
                'serverFileName':'14654654879.doc'
            },{
            	'event':'fail',
        		'tips':'上传失败',
            	'fileName':'aa3.doc',
                'fileSize':15000,
                'serverFileName':'14654654879.doc'
            },{
            	'event':'success',
        		'tips':'上传完成',
            	'fileName':'aa4.doc',
                'fileSize':15000,
                'serverFileName':'14654654879.doc'
            }
        ]
        -->
        </textarea>
        <!-- <iframe id="uploadFrame" style="display:none; width:1px; height:1px;"></iframe> 因为随机名称不能使用动态设置name -->
        <small class="text-muted" id="text"></small>
    </form>
    <form id="dataForm">
        <ul class="uploadFileList">
        </ul>
    </form>
</div>
<iframe name="uploadBridge" id="uploadBridge " style="display: none"></iframe>
<script>


var Uploader=function(selector){
	this.selector=selector;
}
Uploader.prototype.dataList=new Array();
Uploader.prototype.fileSizeTotalMbLimit=5 //文件大小总限制 mb
Uploader.prototype.fileSizeTotalLimit=5*1024*1024 //文件大小总限制 b
Uploader.prototype.fileTotalLimit=0 //文件大小总限制 b


Uploader.prototype.init=function(){
	//console.log(this.selector);
	var fileSizeTotalMbLimit=parseInt($("#fileSizeTotalMbLimit").val());
	var fileTotalLimit=parseInt($("#fileTotalLimit").val());
	var fileSizeMbLimit=parseInt($("#fileSizeMbLimit").val());
	if(fileSizeTotalMbLimit>0){
		this.fileSizeTotalMbLimit=fileSizeTotalMbLimit;
		this.fileSizeTotalLimit=fileSizeTotalMbLimit*1024*1024;
	}
    if(fileSizeMbLimit>0){
        this.fileSizeMbLimit=fileSizeMbLimit*1024*1024;
    }
	if(fileTotalLimit>0){
		this.fileTotalLimit=fileTotalLimit;
	}
	var uploadForm=new UploadForm("#uploadForm");
	uploadForm.init();
}
Uploader.prototype.callback=function(data){
	ht.loading.close();
	$("#uploadForm").get(0).reset();
	var event=data.event;
	if(event=="success"){
		var tips=data.tips;
		if(tips!=""){
			alert(tips);
		}
		var fileList=data.data.fileList;
		for(var i=0;i<fileList.length;i++){
			this.append(fileList[i]);
		}
	}
	if(event=="fail"){
		var tips=data.tips;
		if(tips!=""){
			alert(tips);
		}
	}
	
}
Uploader.prototype.append=function(data){
	var fileTotal=this.getFileTotal();
	/*if(parseInt(data.fileSize)>this.fileSizeMbLimit){
	    alert("单个文件大小尺寸不超过"+$("#fileSizeMbLimit").val()+"MB!");
	    return
    }*/
	if(this.fileTotalLimit>0){
		if(fileTotal>=this.fileTotalLimit){
			alert("最多只能传"+this.fileTotalLimit+"个附件!");
			return ;
		}
	}
	var fileSizeTotal=this.getFileSizeTotal();
	//console.log(fileSizeTotal);
// 	if(fileSizeTotal+parseInt(data.fileSize)>this.fileSizeTotalLimit){
// 		alert("所有文件大小尺寸不超过"+this.fileSizeTotalMbLimit+"MB!");
// 		return ;
// 	}
	var item=this.getItem(data);
	var item=$(item);
	var self=this;
	$(".closeButton",item).bind("click",function(event){
		var target=event.currentTarget;
		var parent=$(target).parent();
		var index=$("li",$(parent).parent()).index(parent);
		self.remove(index);
	})
	this.dataList.push(data);
	$(".uploadFileList").append(item);
	try{
		parent.uploaderUpdate()
	}catch(e){
		
	}
}
Uploader.prototype.getFileSizeTotal=function(){
	var dataList=this.dataList;
	var data=null;
	var fileSizeTotal=0;
	var event;
	for(var i=0;i<dataList.length;i++){
		event=dataList[i].event
		if(event=="success"){
			fileSizeTotal+=parseInt(dataList[i].fileSize);
		}
	}
	return fileSizeTotal;
}
Uploader.prototype.getFileListLength=function(){
	var dataList=this.dataList;
	var data=null;
	var fileListLength=0;
	var event;
	for(var i=0;i<dataList.length;i++){
		event=dataList[i].event
		if(event=="success"){
			fileListLength+=1;
		}
	}
	return fileListLength;
}
Uploader.prototype.getFileTotal=function(){
	return this.getFileListLength();
}
Uploader.prototype.getItem=function(data){
	var event=data.event;
	
	var temp="<li class=\"{event}\">"
	temp+="<p class=\"subject\"><span>{fileName}</span> <span>({fileSize}KB)</span> - <span class=\"tips\">{tips}</span></p>"
	temp+="<a class=\"closeButton\">关闭</a>"
	temp+="<span class=\"progressBar\">1</span>"
	if(event=="success"){
		temp+="<input type=\"hidden\" name=\"serverFileName\" value=\"{serverFileName}\" />"
		temp+="<input type=\"hidden\" name=\"fileName\" value=\"{fileName}\" />"
		//因后台接收按取余做的接收功能所以此属性不能加入
		//temp+="<input type=\"hidden\" name=\"fileSize\" value=\"{fileSize}\" />"
	}
	temp+="</li>"
	
	var reg;
	
	reg = new RegExp( "{event}", "g" )
	temp=temp.replace(reg,data.event);
	
	reg = new RegExp( "{tips}", "g" )
	temp=temp.replace(reg,data.tips);
	
	reg = new RegExp( "{fileName}", "g" )
	temp=temp.replace(reg,data.fileName);
	
	var fileSize=data.fileSize/1024;
	fileSize=Math.ceil(fileSize);
	
	reg = new RegExp( "{fileSize}", "g" )
	temp=temp.replace(reg,fileSize);
	
	reg = new RegExp( "{serverFileName}", "g" )
	temp=temp.replace(reg,data.serverFileName);
	return temp;
}


Uploader.prototype.remove=function(index){
	$(".uploadFileList li").eq(index).remove()
	this.dataList.splice(index,1)
	//console.log(this.dataList);
	try{
		parent.uploaderUpdate()
	}catch(e){
		
	}
}





var UploadForm=function(selector){
	this.selector=selector; 
}
UploadForm.prototype.init=function(){
	var randName="uploader_"+Math.floor(Math.random()*100000000);  
	
	$(this.selector).prop("target",randName);
	//$("#uploadFrame",this.selector).prop("name",randName);
	
	$(this.selector).append('<iframe name="'+randName+'" id="uploadFrame" style="display:none; width:1px; height:1px;"></iframe>');
	var self=this;
	$("#file",this.selector).bind("change",function(event){
		var target=event.currentTarget;
		var value=target.value;
		//console.log(value);
		if(value!=""){
			ht.loading.open();
			$(self.selector).submit();
		}
	})
}


function getFormSerialize(){
	var serialize=$("#dataForm").serialize();
		
	serialize=serialize.replace(/\+/g," ");
	serialize=serialize.replace(/&/g,"安的符");
	serialize=serialize.replace(/=/g,"等于符");
	
	serialize=decodeURIComponent(serialize,true);
	return serialize;
}
function getQueueInfo(){
	var filesSize=uploader.getFileSizeTotal();
	var length=uploader.getFileListLength();
	
	var queueInfo={
		filesSize:filesSize,
		length:length
	}
	return queueInfo;
}
/*
function getFileList(){
	alert("待制作");
}
*/
function getValue(){
	return getFormSerialize();
}
//console.log(getFormSerialize());
</script>


<script type="text/javascript">
seajs.use("/mcp/base/uploader/js/FormPage.js");
</script>
</body>
</html>
